import React, { createContext, ReactElement, useContext } from 'react';
import { useLocalObservable, enableStaticRendering } from 'mobx-react-lite';
import createStore, { IStore } from './rootStore';

interface IProps {
  initialValue: Record<any, any>;
  children: ReactElement;
}

/** 
 * 这个 API 用于告知 MobX，如果正在进行 SSR，则不要触发任何监听器（reaction、autorun、computed）并且不要收集任何依赖，以避免在服务器端无意义的数据更新和资源浪费。
  在服务端渲染的场景下，组件的状态仅仅需要渲染一次，强制监听会导致多余的数据更新，从而增加了服务端的负担，同时也可能使组件的渲染结果出现不一致的问题。
*/
enableStaticRendering(!process.browser);

const StoreContext = createContext({});

export const StoreProvider = ({ initialValue, children }: IProps) => {
  /** useLocalObservable在函数式组件中创建基于当前组件的局部可观察数据,响应式*/
  const store: IStore = useLocalObservable(createStore(initialValue));
  return (
    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
  );
};

export const useStore = () => {
  const store: IStore = useContext(StoreContext) as IStore;
  if (!store) {
    throw new Error('数据不存在');
  }
  return store;
}
